<template>
    <div>
        <HomePanl style="position: relative; background: #f5f5f5;" title="热门品牌" subtitle="国际经典 品质保证">
      <template #main>
        <div class="anniu">
          <button class="dd" @click="slide(-1)" :disabled="currentIndex === 0">&lt;</button>
          <button class="dd" @click="slide(1)" :disabled="currentIndex + 10 > list.length">&gt;</button>
        </div>
        <div class="carousel">
          <ul class="carousel-container" :style="{ transform: `translateX(${-currentIndex * itemWidth}px)` }">
            <li class="carousel-item" v-for="item in list" :key="item.id">
              <img :src="item.picture" alt="">
            </li>
          </ul>
        </div>
      </template>
    </HomePanl>
    </div>
</template>

<script>
import HomePanl from '../Homes/Panl.vue'
import {getBrand} from "@/request/api/myc/myc"
    export default {
        components:{
            HomePanl
        },
        data(){
            return{
                list:[],
                currentIndex:0,
                itemWidth:1250
            }
        },
        mounted() {
            this.Category();

        },
        methods: {
            async Category() {
                const res = await getBrand();
                console.log("热门品牌", res.data.result);
                this.list = res.data.result
            },
            // 左右滑动
            slide(direction){
                if (direction === -1 && this.currentIndex > 0) {
                    this.currentIndex -= 1;
                } else if (direction === 1 && this.currentIndex + 5 <= this.list.length) {
                    this.currentIndex += 1;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.carousel {
  display: flex;
    width: 100%;
    height: 345px;
    overflow: hidden;
    padding-bottom: 40px;
}

.carousel-container {
    width: 200%;
    display: flex;
    transition: all 1s;
}

.carousel-item {
  margin-right: 10px;
  width: 240px;

  /* 假设每个项目的宽度为100px */
  img {
    width: 240px;
    height: 305px;
    cursor: pointer;
  }
}
.carousel-item:nth-child(5n){
  margin-right: 0;
}

.anniu {
  position: absolute;
  right: 0;
  top: 55px;
  // z-index: 300;
}

.dd {
  width: 20px;
  height: 20px;
  color: #fff;
  line-height: 20px;
  display: inline-block;
  text-align: center;
  margin-left: 5px;
  font-size: 10px;
  border: transparent;
  background: #27ba9b;
  cursor: pointer;
}

.dd:disabled {
  cursor: not-allowed;
  background: #ccc;
}
</style>